<!-- 修改昵称 -->
<template>
  <view class="nickName_page screen-width">
    <view class="head_option">
      <div class="black" @tap="backPage">取消</div>
      <div class="title">修改昵称</div>
      <div class="accomplish">
        <text v-if="isTrue" :class="isTrue ? 'active' : ''" @tap="submitBtn">完成</text>
        <text v-if="!isTrue" :class="isTrue ? 'active' : ''">完成</text>
      </div>
    </view>
    <view class="content">
      <input type="text" v-model="nickName" />
    </view>
    <Festival></Festival>
  </view>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      option: "", // 获取地址栏信息
      nickName: "" // input框信息
    };
  },
  //监听属性 类似于data概念
  computed: {
    isTrue() {
      if (this.option.value != this.nickName) {
        return true;
      } else {
        return false;
      }
    }
  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    // 点击取消
    backPage() {
      uni.navigateBack({
        delta: 2
      });
    },
    // 点击完成
    submitBtn() {
      let _this = this;
      if (!this.nickName) {
        // console.log(123);
        uni.showToast({
          title: "昵称不能为空",
          duration: 2000,
          icon: "none"
        });
        return;
      } else if (this.nickName.length >= 10) {
        uni.showToast({
          title: "限制10个字符",
          duration: 2000,
          icon: "none"
        });
        return;
      }
      //
      _this
        .$post(
          "/bmj-api/api/ums/umsUsers/updateNickName?newNickName=" +
            _this.nickName
        )
        .then(res => {
          if (res.code == 200) {
            uni.showToast({
              title: "修改成功",
              duration: 2000,
              icon: "none"
            });
          }
          uni.navigateBack({
            delta: 2
          });
        });
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  onLoad(options) {
    this.option = options;
    this.nickName = options.value;
    // console.log(options.value);
  }
};
</script>
<style lang="less" scoped>
//@import url(); 引入公共css类
.nickName_page {
  //   background-color: #fff;
  .head_option {
    height: 80rpx;
    border-bottom: 1rpx solid #ccc;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30rpx;
    .title {
      color: #545454;
      font-weight: 700;
    }
    .accomplish {
      text {
        background-color: #ccc;
        padding: 10rpx 20rpx;
        border-radius: 6rpx;
        color: #fff;
        &.active {
          background-color: #1f7dff;
        }
      }
    }
  }
  .content {
    min-height: calc(100vh - 80rpx);
    input {
      height: 88rpx;
      background-color: #fff;
      padding-left: 30rpx;
    }
  }
}
</style>
